<template>
  <div class="news-file-box">
    <div class="news-file-main">
      <div v-for="i in 11" :key="i" class="news-file-item">
        <div class="news-file-icon">
          <i class="fal fa-file-word"></i>
        </div>
        <div class="news-file-name">常用文件</div>
        <div class="news-file-download">下载</div>
      </div>
      <div class="news-file-item">
        <div class="news-file-icon">
          <i class="fal fa-file-word"></i>
        </div>
        <div class="news-file-name">常用文件常用文件常用文件常用文件</div>
        <div class="news-file-download">下载</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onBeforeMount, onMounted } from 'vue';
  export default defineComponent({
    name: 'NewsFile',
    setup() {
      const state = reactive({});
      onBeforeMount(() => {});
      onMounted(() => {});
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .news-file-box {
    width: 100%;
    height: 335px;
    margin-top: 15px;
    box-sizing: border-box;
    overflow: auto;
    .news-file-main {
      display: flex;
      flex-wrap: wrap;
    }
    .news-file-item {
      width: 70px;
      height: 85px;
      margin: 5px;
      padding: 5px;
      box-sizing: border-box;
      cursor: pointer;
      text-align: center;
      position: relative;
      .news-file-icon {
        width: 42px;
        height: 42px;
        margin: 0 auto;
        i {
          font-size: 40px;
          color: #0057aa;
        }
      }
      .news-file-name {
        max-height: 36px;
        line-height: 16px;
        font-size: 12px;
        margin-top: 8px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }
      .news-file-download {
        font-size: 12px;
        padding: 2px 8px;
        color: #000;
        position: absolute;
        bottom: 0;
        right: 0;
        border: 1px solid #000;
        border-radius: 4px;
        background: #fff;
        display: none;
      }
    }
    .news-file-item:hover .news-file-download {
      display: block;
    }
  }
  .news-file-box::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
</style>
